<html>
<head>
    <script src="../tma.js"></script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;
        uniform vec3 uLightingDirection;
        uniform vec3 uDirectionalColor;
        uniform vec3 uAmbientColor;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        void main() {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
            vec3 transformedNormal = uNMatrix * aVertexPosition;
            float directionalLightWeighting =
                    max(dot(transformedNormal, uLightingDirection), 0.0);
            vLightWeighting = uAmbientColor +
                    uDirectionalColor * directionalLightWeighting;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        void main() {
            vec4 textureColor = vec4(1.0, 1.0, 1.0, 1.0);
            gl_FragColor =
                    vec4(textureColor.rgb * vLightWeighting, textureColor.a);
        }
    </script>
    <script>
        tma.extlibs = [ 'ext/gl-matrix.js' ];
        tma.onload = function () {
            var screen = new TmaScreen(500, 500, TmaScreen.MODE_3D);
            screen.attachTo(document.getElementById('canvas'));
            var program = screen.createProgram('shader-vs', 'shader-fs');

            var sphere = [];
            var vertices = [];
            var indices = [];

            for (var i = 0; i < 5; ++i) {
                sphere[i] = TmaModelPrimitives.createSphere(i,
                        TmaModelPrimitives.SPHERE_METHOD_EVEN);
                vertices[i] = screen.createBuffer(sphere[i].getVertices());
                indices[i] = screen.createElementBuffer(sphere[i].getIndices());
            }
            resolution = 0;
            setResolution = function (n) {
                resolution = n;
                program.setAttributeArray(
                       'aVertexPosition', vertices[n], 0, 3, 0);
            }
            setResolution(2);

            // Initializes matrices.
            var pMatrix = mat4.create();
            var mvMatrix = mat4.create();
            var nMatrix = mat3.create();
            mat4.perspective(
                    45, screen.width / screen.height, 0.1, 100.0, pMatrix);
            mat4.identity(mvMatrix);
            program.setUniformMatrix('uPMatrix', pMatrix);

            var r = 0;
            var mvMatrixBase = mat4.create(mvMatrix);

            setInterval(function () {
                // Initializes screen.
                screen.fillColor(0.0, 0.0, 0.0, 1.0);

                // Draws cube.
                mat4.set(mvMatrixBase, mvMatrix);
                mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
                mat4.rotate(mvMatrix, r, [1.0, 0.5, 1]);
                mat4.toInverseMat3(mvMatrix, nMatrix);
                mat3.transpose(nMatrix);
                program.setUniformMatrix('uMVMatrix', mvMatrix);
                program.setUniformMatrix('uNMatrix', nMatrix);
                program.setUniformVector('uLightingDirection', [
                    parseFloat(document.getElementById('dX').value),
                    parseFloat(document.getElementById('dY').value),
                    parseFloat(document.getElementById('dZ').value)
                ]);
                program.setUniformVector('uDirectionalColor', [
                    parseFloat(document.getElementById('dR').value),
                    parseFloat(document.getElementById('dG').value),
                    parseFloat(document.getElementById('dB').value)
                ]);
                program.setUniformVector('uAmbientColor', [
                    parseFloat(document.getElementById('aR').value),
                    parseFloat(document.getElementById('aG').value),
                    parseFloat(document.getElementById('aB').value)
                ]);
                program.drawElements(Tma3DScreen.MODE_TRIANGLES,
                        indices[resolution], 0, sphere[resolution].items());
                // Applies Animation.
                r += 0.005;
            }, 15);
        };
    </script>
</head>
<body>
<div id="canvas"></div>
<hr>
<h1>Sphere resolution</h1>
<input type="button" value="0" onclick="setResolution(0);"></input>
<input type="button" value="1" onclick="setResolution(1);"></input>
<input type="button" value="2" onclick="setResolution(2);"></input>
<input type="button" value="3" onclick="setResolution(3);"></input>
<input type="button" value="4" onclick="setResolution(4);"></input>
<h1>Lighting</h1>
<h2>Directional light</h2>
X: <input type="text" id="dX" value="0.25">
Y: <input type="text" id="dY" value="0.25">
Z: <input type="text" id="dZ" value="1.0">
R: <input type="text" id="dR" value="0.8">
G: <input type="text" id="dG" value="0.8">
B: <input type="text" id="dB" value="0.8">
<h2>Ambient light</h2>
R: <input type="text" id="aR" value="0.2">
G: <input type="text" id="aG" value="0.2">
B: <input type="text" id="aB" value="0.2">
</body>
</html>
